<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>v-for和template</title>  
</head>  
<body>  
  <div id="app">  
    <!--1. 假设这里的div对我们的业务无意义,只是为了包裹里面的内容-->
    <span>假设这里的div对我们的业务无意义,只是为了包裹里面的内容</span><br>
    <div v-for="(value, key, index) in info">
      <span> {{value}}-- </span>
      <strong> {{key}}-- </strong>
      <i> {{index}} </i>
    </div>
    <span>由于div在这里无意义, 此时可以使用template</span><br>
    <!--2. 由于div在这里无意义, 此时可以使用template-->
    <template v-for="(value, key, index) in info">
      <span> {{value}}-- </span>
      <strong> {{key}}-- </strong>
      <i> {{index}} </i><br>
    </template>
  </div>  

  <script src="../lib/vue.js"></script>  
  <script>  
    // 使用vue  
    const app = Vue.createApp({  
      data: function () {  
        return {  
          movies: []  
          , info: {name: "why", age: 18, height: 1.88}
          , message: "Hellow vue"
        };  
      },  
      methods: {  
      }  
    });  

    // 挂载   
    app.mount("#app");  
  </script>  

</body>  
</html>  